<template>
  <div class="container">
    <div class="view-main">
      <el-card style="margin: 10px 0 0 10px">
        <template #header v-if="$route.query.name">
          <el-breadcrumb separator-class="el-icon-arrow-right" >
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </template>
        <!-- 公共头部 -->
        <el-form :inline="true" label-width="200px" size="small">
          <el-form-item label="目录名称" style="margin-left: 10px" label-width="70px">
            <el-input v-model="search.keyword"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="65px">
           <el-select v-model="search.state" placeholder="请选择">
              <el-option label="已启用" :value="1"></el-option>
              <el-option label="已禁用" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button @click="btnClear">清除</el-button>
            <el-button type="primary" @click="btnSearch">搜索</el-button>
          </el-form-item>
            <el-button style="float:right" type="success" @click="AddEditBtn"><i class="el-icon-edit"></i>新增目录</el-button>
            <el-button type="text" v-if="$route.query.subjectID" @click="$router.back()" style="float:right;margin-right:10px"> ⬅返回学科</el-button>
        </el-form>
        <el-alert
          :title="`数据一共${page.counts}条`"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 10px"
        ></el-alert>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="80px"></el-table-column>
          <el-table-column align="center" label="所属学科" prop="subjectName"></el-table-column>
          <el-table-column align="center" label="目录名称" prop="directoryName"></el-table-column>
          <el-table-column align="center" label="创建者" prop="username"></el-table-column>
          <el-table-column align="center" label="创建日期" width="160px">
            <template slot-scope="{ row }">{{row.addDate | parseTime}}</template>
          </el-table-column>
          <el-table-column align="center" label="面试题数量" prop="totals"></el-table-column>
          <el-table-column align="center" label="状态">
            <template slot-scope="{ row }">
              {{row.state === 1 ? "已启用" : "已禁用"}}</template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="180px">
            <template slot-scope="{ row }">
              <el-button type="text" @click="editState(row)">
                {{row.state === 0 ? "启用" : "禁用"}}</el-button>
              <el-button type="text" :disabled="row.state === 0" @click="AddEditBtn(row)">修改</el-button>
              <el-button type="text" :disabled="row.state === 0" @click="deleteBtn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="end" style="height: 60px">
          <el-pagination
            background
            layout="total,prev,pager,next,sizes,jumper"
            :page-size="page.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            :current-page="page.page"
            :total="page.counts"
            @size-change="handleSizeChange"
            @current-change="changePage"
            style="margin-top:10px;"
          />
        </el-row>
      </el-card>
      <!-- 新增或编辑窗口 -->
      <DirectorysAdd  :showDialog.sync="showDialog" :formData="formData" ref="DirectorysAdd"/>
    </div>
  </div>
</template>

<script>
import { list, remove, changeState } from '@/api/hmmm/directorys'
import DirectorysAdd from '../components/directorys-add.vue'
export default {
  data () {
    return {
      tableList: [],
      page: {
        page: 1, // 当前页码
        pagesize: 10, // 页大小
        counts: 0 // 总记录数
      },
      state: '',
      showDialog: false,
      formData: {},
      search: {
        keyword: '', // 搜索关键词
        state: '' // 状态
      }

    }
  },
  components: {
    DirectorysAdd
  },
  async created () {
    if (this.$route.query.subjectID && this.$route.query.name) {
      await this.getList({ ...this.page, subjectID: this.$route.query.subjectID })
    } else {
      this.getList(this.page)
    }
  },
  methods: {
    async getList (data) {
      const { data: res } = await list(data)
      this.tableList = res.items
      this.page.counts = res.counts
      this.state = res.state
    },
    // currentPage 改变时会触发该函数
    changePage (newPage) {
      this.page.page = newPage
      this.getList(this.page)
    },
    // 改变每页数据条数pagesize时触发该函数
    handleSizeChange (newSize) {
      this.page.pagesize = newSize
      this.getList(this.page)
    },
    // 切换状态
    async editState (row) {
      // console.log(row)
      const state = row.state === 1 ? 0 : 1
      await changeState({ id: row.id, state })
      console.log(state)
      await this.getList(this.page)
      this.$message.success('切换状态成功')
    },
    // 删除目录
    async deleteBtn (id) {
      try {
        await this.$confirm('您确定永久删除该目录吗?', '提示', { type: 'warning' })
        await remove({ id })
        this.getList(this.page)
        this.$message.success('删除员工成功')
      } catch (error) {
        this.$message('取消删除员工操作')
        console.log(error)
      }
    },
    // 判断是进新增还是修改
    AddEditBtn (row) {
      if (row) {
        // 有id修改
        this.formData = { ...row }
        this.$refs.DirectorysAdd.editList()
      } else {
        this.formData = {}
        this.$refs.DirectorysAdd.addList()
      }
      this.showDialog = true
    },
    // 清除
    btnClear () {
      this.search = {
        keyword: '',
        state: ''
      }
      // 清除搜索状态，回到第一页
      this.page.page = 1
      this.getList(this.page)
    },
    btnSearch () {
      this.page.page = 1
      if (this.search.keyword && this.search.state !== '') {
        return this.getList({ directoryName: this.search.keyword, state: this.search.state, ...this.page })
      }
      if (this.search.state === '' && this.search.keyword) {
        return this.getList({ directoryName: this.search.keyword, ...this.page })
      }
      if (this.search.state !== '' && !this.search.keyword) {
        return this.getList({ state: this.search.state, ...this.page })
      }
    }
  }
}
</script>

<style scoped lang='less'>
.view-main {
  .breadcrumb {
    height: 30px;
    border-bottom: 1px solid #ccc;
  }
  ::v-deep .el-table th.is-leaf {
    background-color: #fafafa !important;
    border-bottom: 2px solid #e8e8e8;
  }
}
</style>
